!<template>
  <div style="text-align: left;margin:5px 0;">
    <div class="page-header">供应商管理</div>
    <a-button type="primary" @click="addSupplier()">
      <template #icon>
        <plus-circle-outlined />
      </template>
      新增供应商
    </a-button>
  </div>

  <div>
    <a-modal v-model:visible="addVisible">
      <template #title>
        <div style="display: flex; align-items: center">
          <user-outlined />
          <span style="margin-left: 5px">新增供应商信息</span>
        </div>
      </template>
      <template #footer>
        <!-- <a-button key="back" @click="handleCancel">Return</a-button> -->
        <a-button key="submit" type="primary" @click="submitAdd">提交</a-button>
      </template>
      <div class="edit-container">
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">供应商名称：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="add.addUSupplierName"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">联系方式：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="add.addPhoneNum"></a-input>
          </span>
        </div>
      </div>
    </a-modal>
  </div>
  <div>
    <a-table
      :columns="columns"
      :data-source="supplierList"
      :pagination="pagenation"
      :locale="{emptyText:'暂无供应商数据'}"
      :loading="tableLoading"
      @change="changePage"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'supplierId'">
          <span>供应商Id</span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'supplierId'">
          <span>{{ record.supplierId }}</span>
        </template>
        <template v-else-if="column.key === 'supplierName'">
          <div>
            <span style="color:#8c8c8c">{{ record.supplierName }}</span>
          </div>
        </template>
        <template v-else-if="column.key === 'phoneNum'">
          <div>{{record.phoneNum}}</div>
        </template>

        <template v-else-if="column.key === 'action'">
          <div class="account-actions">
            <a-tooltip title="修改" :mouseEnterDelay="0" :mouseLeaveDelay="0">
              <a-button type="primary" shape="circle" @click="updateSupplier(record.key)">
                <template #icon>
                  <form-outlined />
                </template>
              </a-button>
            </a-tooltip>

            <a-popconfirm
              title="确认是否删除该供应商?"
              ok-text="是"
              okType="danger"
              cancel-text="取消"
              @confirm="submitDelete(record.key)"
            >
              <template #icon>
                <question-circle-outlined style="color: red" />
              </template>
              <a-button type="danger" shape="circle">
                <template #icon>
                  <delete-outlined />
                </template>
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </div>
  <div>
    <a-modal v-model:visible="editVisible">
      <template #title>
        <div style="display: flex;
    align-items: center;">
          <user-outlined />
          <span style="margin-left:5px;">供应商信息修改</span>
        </div>
      </template>
      <template #footer>
        <!-- <a-button key="back" @click="handleCancel">Return</a-button> -->
        <a-button key="submit" type="primary" @click="submitEdit">提交</a-button>
      </template>
      <div class="edit-container">
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left:5px;">供应商ID：</span>
          </span>
          <span class="edit-item-content">{{edit.supplierId}}</span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left:5px;">名称：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editSupplierName" :placeholder="edit.supplierName"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left:5px;">供应商联系方式：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editSupplierPhoneNum" :placeholder="edit.phoneNum"></a-input>
          </span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { ref } from "vue";
import { message } from "ant-design-vue";
import {
  DeleteOutlined,
  FormOutlined,
  QuestionCircleOutlined,
  UserOutlined,
  IdcardOutlined,
  LockOutlined
} from "@ant-design/icons-vue";
import { selectList } from "@/api/user";
import {
  selectSupplierList,
  updateSupplier,
  deleteSupplier,
  addSupplier
} from "@/api/supplier";
let pagenation = {
  pageSize: 5,
  total: 0
};
const columns = [
  {
    name: "supplierId",
    dataIndex: "commodityId",
    width: 300,
    key: "supplierId"
  },
  {
    title: "供应商名称",
    dataIndex: "supplierName",
    width: 300,
    key: "supplierName"
  },
  {
    title: "供应商联系方式",
    width: 300,
    dataIndex: "phoneNum",
    key: "phoneNum"
  },
  {
    title: "操作",
    key: "action"
  }
];
export default {
  name: "supplier",
  components: {
    DeleteOutlined,
    FormOutlined,
    QuestionCircleOutlined,
    UserOutlined,
    IdcardOutlined,
    LockOutlined
  },
  setup() {
    return {
      columns,
      pagenation,
      editVisible: ref(false),
      addVisible: ref(false),
      tableLoading: ref(true),
      add: ref({
        addPhoneNum: null,
        addUSupplierName: null
      }),
      editSupplierName: ref(""),
      editSupplierId: ref(""),
      editSupplerPhoneNum: ref(""),
      editCheck: ref(false),
      editRole: ref("1")
    };
  },

  data() {
    return {
      edit: null,
      supplierList: []
    };
  },

  mounted() {
    this.getList(1, 6);
  },

  methods: {
    updateSupplier(index = 0) {
      this.editVisible = true;
      this.edit = this.supplierList[index];
    },
    addSupplier() {
      this.addVisible = true;
    },
    submitAdd() {
      let that = this;
      const res = addSupplier({
        supplierName: this.add.addUSupplierName,
        phoneNum: this.add.addPhoneNum
      });
      res
        .then(response => {
          this.tableLoading = true;
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            message.success(response.msg);
            that.getList(1, 6);
            this.add.addUSupplierName = "";
            this.add.addPhoneNum = "";
          } else {
            message.warning(response.msg);
            this.add.addUSupplierName = "";
            this.add.addPhoneNum = "";
          }
          that.addVisible = false;
          that.tableLoading = false;
          that.getList();
        })
        .catch(error => {
          that.tableLoading = false;
          that.addVisible = false;
          console.log(error);
        });
    },
    submitDelete(index) {
      let that = this;
      const res = deleteSupplier({
        supplierId: this.supplierList[index].supplierId
      });
      res
        .then(response => {
          //这里是请求成功后的操作
          if (response.code === 100) {
            that.supplierList = [];
            that.supplierList = that.getList();
          }
          that.tableLoading = false;
        })
        .catch(error => {
          that.tableLoading = false;
          console.log(error);
        });
    },
    submitEdit() {
      let that = this;
      const res = updateSupplier({
        supplierId: this.edit.supplierId,
        supplierName:
          this.edit.editSupplierName === undefined
            ? this.edit.supplierName
            : this.edit.editSupplierName,
        phoneNum:
          this.edit.editSupplierPhoneNum === undefined
            ? this.edit.phoneNum
            : this.edit.editSupplierPhoneNum
      });
      res
        .then(response => {
          this.tableLoading = true;
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            message.success(response.msg);
            that.getList(1, 6);
          } else {
            message.warning(response.msg);
          }
          that.editVisible = false;
          that.tableLoading = false;
          that.getList();
        })
        .catch(error => {
          that.tableLoading = false;
          that.editVisible = false;
          console.log(error);
        });
    },
    getList(p = 1, s = 6) {
      const res = selectSupplierList({
        pageNum: p,
        pageSize: s
      });
      let that = this;
      res
        .then(response => {
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            that.supplierList = [];
            let i = 0;
            for (const key in response.data) {
              if (response.data.hasOwnProperty(key)) {
                const element = response.data[key];
                element.key = i;
                i += 1;
                that.supplierList.push(element);
                that.pagenation.total = response.data.total;
              }
            }
          }
          that.tableLoading = false;
        })
        .catch(error => {
          that.tableLoading = false;
          console.log(error);
        });
    },
    changePage(pagination) {
      // console.log(pagination);
      // this.tableLoading = true
      // this.getList(pagination.current, 6);
    },
    deleteConfirm() {}
  }
};
</script>

<style scoped>
.page-header {
  font-size: 22px;
  color: #616161;
  margin: 0.5rem 0;
}
.edit-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.edit-item-title {
  user-select: none;
  width: 200px;
  font-size: 16px;
  /* border-bottom: 1px solid gray; */
}
.edit-item-content {
  margin-left: 1rem;
  color: rgb(126, 126, 126);
}
.edit-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.account-actions {
  display: flex;
  gap: 1rem;
}
</style>